<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS course</title>
    <link rel="stylesheet" href="01_selectors.css">
    <link rel="stylesheet" href="02_fonts.css">
    <link rel="stylesheet" href="03_colors.css">
    <link rel="stylesheet" href="04_borders.css">
    <link rel="stylesheet" href="06_links.css">
    <link rel="stylesheet" href="07_lists.css">
    <link rel="stylesheet" href="08_display.css">
    <link rel="stylesheet" href="09_positions.css">
</head>
<body>
<nav class="navbar">
<ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
</ul>
</nav>
  <header id="header" style="border: 1px solid gray">
    <h3>Это очень крутой сайт!</h3>
  </header>
  <div class="card html">
    <h2>HTML</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, velit?</p>
  </div>

    <div class="card">
        <h2>Positions</h2>
        <div class="playground">
            <div class="pos-box">

            </div>
        </div>
    </div>

    <div class="card">
        <h2>Display</h2>
        <ul class="inline">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, distinctio!
    </div>
        <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, distinctio!
    </div>
    <div class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, distinctio!
    </div>
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1920px-HTML5_logo_and_wordmark.svg.png" class="img" alt="эмблема html">
    </div>

      <div class="card css">
        <h2>CSS</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, perferendis!</p>
      </div>
    <div class="card">
        <h2>Lists & Tables</h2>
        <ul class="list">
            <ul class="list">
                <li>Lorem ipsum.</li>
                <li>Expedita, quas!</li>
                <li>Ducimus, veniam.</li>
                <li>Dignissimos, perferendis!</li>
                <li>Expedita, officiis.</li>
            </ul>
        </ul>
        <table class="table">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
    </div>
  <div class="card">
      <h2>Links & Buttons</h2>
      <p>
          <a href="#" class="btn">Это очень важная ссылка</a>
      </p>
      <p>
          <button class="btn">Это кнопка!</button>
      </p>
  </div>

    <div class="card">
        <h2>Colors</h2>

        <h3 class="color-1">Color 1</h3>
        <h3 class="color-2">Color 2</h3>
        <h3 class="color-3">Color 3</h3>
        <h3 class="color-4">Color 4</h3>
        <h3 class="color-5">Color 5</h3>
    </div>
    <div class="card">
        <h2>Borders</h2>

        <p class="border-1">Lorem ipsum dolor sit amet.</p>
        <p class="border-2">Lorem ipsum dolor sit amet.</p>
        <p class="border-3">Lorem ipsum dolor sit amet.</p>

    </div>
</body>
</html>